<template>
  <div class="Comment" v-if="Comment.crate !== undefined">
    <div class="pj" >
      <div class="pj-left">
        <span>宝贝评价({{ Comment.crate }}+)</span>
      </div>
     <div class="pj-right">
        <span>查看全部></span>
      </div>
    </div>
    <div class="extr" v-if="Comment.extraInfo !== undefined">
      <div>
        <span>{{ Comment.style }}</span>
      </div>
      <div>
        <span v-if="Comment.extraInfo[1] !== undefined">{{ Comment.extraInfo[1] }}</span>
      </div>
    </div>
    <div class="user" v-for="item in Comment.list">
      <div class="user-c">
        <img class="userimg" :src="item.user.avatar" alt="" />
        <span>{{ item.user.uname }}</span>
      </div>

      <div class="commit">
        <span>{{ item.content }}</span>
      </div>
    </div>
    <div class="imggg" >
      <div class="commit-img" v-for="item in Comment.image">

        <a :href="item"> <img :src="item" alt="" /> </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailsCompment",
  props: {
    Comment: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped>
.imggg{
  display: flex;
    padding-left: 5vw;
  padding-top: 2vw;
  padding-right: 3vw;
}
.commit-img {
  text-align: left;
  padding-right: 2vw;

}
.commit-img img {
  width: 18vw;
  height: 24vw;
}
.Comment {
  padding-bottom: 5vw;
      border-bottom: 1px dashed darkgray;
}
.extr {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px dashed darkgray;
}
.extr div {
  width: 50%;
  text-align: center;
  height: 7.5vw;
  line-height: 7.5vw;
}
.extr div span {
  background: darkgrey;
  border-radius: 2vw;
  padding: 0.5vw;
}
.user {
  text-align: center;
}
.commit {
  display: grid;
  /* width: 80%; */
  padding-left: 5vw;
  padding-right: 5vw;
  text-align: left;
}
.user-c {
  /* display: grid; */
  padding-left: 5vw;
  display: flex;
  padding-top: 3vw;
  padding-bottom: 3vw;
}
.user-c span {
  height: 12vw;
  line-height: 12vw;
}
.userimg {
  width: 12vw;
  height: 12vw;
}
.pj {
  display: flex;
  height: 10vw;
  font-size: 4vw;
  background-color: #c0c0c0;
  line-height: 10vw;
  border-radius: 4vw;
}
.pj-left {
  width: 67%;
  margin-left: 7vw;
}
.comment-style {
  text-align: center;
  padding-top: 2vw;
  padding-bottom: 2vw;
}
</style>
